<template>
  <AdVxeModal
    v-bind="$attrs"
    @register="registerModal"
    :id="'audit-entity-modal'"
    :title="t('routes.system.audit.auditEntity.title')"
    :close-func="handleClose"
    @ok="handleOk"
    width="70%"
    height="800px"
  >
    <AdVxeTable @register="registerTable" :searchInfo="filterGroupRef">
      <template #expandedRowRender="{ row }">
        <AdVxeTable @register="registerPropertyTable" :data="row.Properties" />
      </template>
    </AdVxeTable>
  </AdVxeModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useI18n } from '@/hooks/web/useI18n';

  import { FilterGroup } from '@/utils/common/types';

  import { AdVxeModal, useModalInner } from '@/components/AdVxeModal';
  import { AdVxeTable, useAdVxeTable } from '@/components/AdVxeTable';
  import { readAuditEntries } from '@/api/audit/auditentity';

  import { auditEntityColumns, auditPropertyColumns } from './auditentity.data';

  defineOptions({ name: 'AuditEntityModal' });

  const { t } = useI18n();
  const filterGroupRef = ref<FilterGroup>(new FilterGroup());

  const [registerTable, { reload }] = useAdVxeTable({
    id: 'system-audit-entity-modal-table',
    // 表标题呈现器
    title: t('routes.system.audit.auditEntity.auditEntityList'),
    // 表格数据接口请求对象
    api: readAuditEntries,
    // 表单列信息 BasicColumn[]
    columns: auditEntityColumns,
    // 展开行
    expand: true,
    // 展开行配置项（不支持虚拟滚动）
    expandConfig: {
      // 触发方式（注：当多种功能重叠时，会同时触发）
      // default（点击按钮触发）, cell（点击单元格触发）, row（点击行触发）
      trigger: 'row',
      // height: 350,
    },
    // 使用搜索表单
    searchForm: true,
    // 是否带有边框 boolean | default（默认）, full（完整边框）, outer（外边框）, inner（内边框）, none（无边框）
    border: false,
    // 是否显示序号列
    showSeqColumn: true,
  });

  const [registerPropertyTable] = useAdVxeTable({
    id: 'system-audit-entity-modal-property-table',
    // 表标题呈现器
    title: t('routes.system.audit.auditEntityPropertiesTitle'),
    // 表单列信息 BasicColumn[]
    columns: auditPropertyColumns,
    // 使用搜索表单
    searchForm: false,
    toolbarConfig: {
      zoom: false,
      refresh: false,
    },
    pagerConfig: { enabled: false },
    size: 'small',
    height: 350,
    // autoResize: false,
    // 是否带有边框 boolean | default（默认）, full（完整边框）, outer（外边框）, inner（内边框）, none（无边框）
    border: false,
    // 是否显示序号列
    showSeqColumn: true,
  });

  const [registerModal, { closeModal, changeLoading }] = useModalInner(async (data) => {
    try {
      changeLoading(true);
      if (data.filterGroup.Operate && data.filterGroup.Rules && data.filterGroup.Groups) {
        filterGroupRef.value = data.filterGroup as FilterGroup;
      }
      await reload();
    } finally {
      changeLoading(false);
    }
  });

  /** 处理确定 */
  async function handleOk() {
    closeModal();
  }

  /** 处理取消 */
  async function handleClose() {
    return true;
  }
</script>
